<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线聊天</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            height: 100vh;
        }

        .sidebar {
            width: 300px;
            background-color: #f1f1f1;
            border-right: 1px solid #ccc;
            padding: 20px;
            overflow-y: auto;
        }

        .current-user {
            display: flex;
            align-items: center;
            margin-bottom: 100px;
            border: #409EFF solid;
        }

        .current-user img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .friend {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            cursor: pointer;
            border: #409EFF solid;
        }

        .friend img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .chat-container {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .chat-header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
        }

        .chat-message {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .chat-input {
            display: flex;
            padding: 10px;
            background-color: #f1f1f1;
            align-items: center;
        }

        .chat-input input {
            flex: 1;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            outline: none;
        }

        .emoji-picker {
            margin-left: 10px;
            cursor: pointer;
        }

        .chat-input button {
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            margin-left: 10px;
            cursor: pointer;
        }

        .chat-input button:hover {
            background-color: #45a049;
        }
        .exit{
            background-color: blue;
            height: 80px;
            font-size: 15px;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 10px 20px;
            margin-left: 1000px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="sidebar">
        <!-- 当前用户头像和昵称 -->
        <div class="current-user">
            <img src="https://via.placeholder.com/40" alt="头像">
            <span>当前用户</span>
        </div>
        <!-- 好友列表 -->
        <div class="friend">
            <img src="https://via.placeholder.com/40" alt="头像">
            <span>好友1</span>
        </div>
        <div class="friend">
            <img src="https://via.placeholder.com/40" alt="头像">
            <span>好友2</span>
        </div>
    </div>
    <div class="chat-container">
        <div class="chat-header">、
            <a href="index.html">
            <button class="exit">返回首页</button>
            </a>
            <h2>在线聊天窗口</h2>

        </div>
        <!-- 聊天消息区域 -->
        <div class="chat-messages" id="chat-messages">
        </div>
        <!-- 聊天输入框和发送按钮 -->
        <div class="chat-input">
            <input type="text" id="chat-input" placeholder="输入消息...">
            <span class="emoji-picker" id="emoji-picker">😀</span>
            <button id="send-button">发送</button>
        </div>
    </div>
</div>

<script>
    // 获取DOM元素
    const chatMessages = document.getElementById('chat-messages');
    const chatInput = document.getElementById('chat-input');
    const sendButton = document.getElementById('send-button');
    const emojiPicker = document.getElementById('emoji-picker');

    // 请将以下URL替换为你的WebSocket服务器地址
    const socket = new WebSocket('ws://your-websocket-server-url');

    // 监听WebSocket连接打开事件
    socket.addEventListener('open', (event) => {
        console.log('WebSocket连接已打开:', event);
    });

    // 监听WebSocket接收到消息事件
    socket.addEventListener('message', (event) => {
        const message = event.data;
        addMessageToChat(message);
    });

    // 监听WebSocket连接关闭事件
    socket.addEventListener('close', (event) => {
        console.log('WebSocket连接已关闭:', event);
    });

    // 监听WebSocket错误事件
    socket.addEventListener('error', (event) => {
        console.error('WebSocket错误:', event);
    });

    // 监听发送按钮点击事件
    sendButton.addEventListener('click', () => {
        const message = chatInput.value;
        if (message.trim() !== '') {
            socket.send(message);
            chatInput.value = '';
        }
    });

    // 监听输入框回车事件
    chatInput.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            sendButton.click();
        }
    });

    // 监听表情选择器点击事件
    emojiPicker.addEventListener('click', () => {
        const emoji = prompt('请输入表情字符:');
        if (emoji) {
            chatInput.value += emoji;
            chatInput.focus();
        }
    });

    // 将消息添加到聊天窗口
    function addMessageToChat(message) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('chat-message');
        messageElement.textContent = message;
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
</script>
</body>
</html>
